<script setup lang="ts">
import { ref } from "vue"
import { onShow } from '@dcloudio/uni-app'
import { getTouristIDAPI, getLoginAPI } from '@/services/taglist'

const TouristID = ref<any>([])
const user = ref<any>({
    username: "lisi",
    password: "123456"
})
const userData = ref<any>({})

const getTouristIDData = async (userId: any) => {
    const res = await getTouristIDAPI(userId)
    TouristID.value = res.data
    console.log(res.data)
}

const getLoginData = async (data: any) => {
    const res = await getLoginAPI(data)
    userData.value = res.data
    console.log(res.data)
}

onShow(async () => {
    await Promise.all([getTouristIDData(1), getLoginData(user.value)])
})
</script>

<template>
    <view class="conent">
        <view class="my">
            <view class="my-login">
                <image
                    src="https://web-xcu-sky.oss-cn-beijing.aliyuncs.com/2024-03-15/c17ef279-c93f-4019-8c6b-c0ad8a322c17.png"
                    mode="scaleToFill" class="img" />
            </view>

            <view class="my-name">
                <text>李四</text>
                <text>小红书号： {{ userData.id }}</text>
                <text>IP属地: 河南</text>
            </view>

        </view>
        <view class="fun">
            <view class="left">
                <view class="constellation">巨蟹座</view>
                <view class="item">
                    <text>447</text>
                    <text>获赞与收藏</text>
                </view>
<<<<<<< HEAD
                <navigator :url="`/pages/login/login`">
                    <view class="constellation">登录</view>
                </navigator>
=======
>>>>>>> b63644e8125a50cea4db6ef3a60c700862583928
            </view>
        </view>

    </view>
    <view class="divider"></view>
    <view class="guess">
        <navigator class="guess-item" v-for="item in TouristID" :key="item" :url="`/pages/item/item?id=${item.id}`"
            hover-class="navigator-hover">
            <image class="image" mode="aspectFill" :src="item.img"></image>
            <view class="price">
                <text class="small">{{ item.cityName }}</text>
                <text class="right">{{ item.routes }}</text>
            </view>
        </navigator>
    </view>
</template>

<style lang="scss">
.guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;

    .guess-item {
        width: 345rpx;
        padding: 24rpx 20rpx 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #fff;
    }

    .image {
        width: 304rpx;
        height: 304rpx;
        border-radius: 10rpx;
    }

    .images {
        width: 60rpx;
        height: 60rpx;
        border-radius: 100%;
    }

    .name {
        height: 40rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price {
        line-height: 1;
        margin-top: 10px;
        padding-top: 4rpx;
        color: #000;
        font-size: 26rpx;
    }

    .small {
        font-size: 30rpx;
        margin-left: 10rpx;
    }

    .right {
        float: right;
    }
}

.divider {
    background: #E0E3DA;
    width: 100%;
    height: 5rpx;
    margin-top: 15px;
}

.header {
    border-radius: 5px 5px 5px 5px;
    margin-top: 40rpx;
    display: flex;
    justify-content: space-around;

    .title {
        display: flex;
    }
}

.conent {
    background-color: #ccc;
    background-image: linear-gradient(to top, #e5e5e5 0%, #e2ebf0 100%);
}

.my-fun {
    margin-top: 60rpx;
    display: flex;
    justify-content: space-around;

    .item {
        display: flex;
        flex-direction: column;
        background-color: #cccccc82;
        padding: 20rpx;
        border-radius: 20rpx;
        margin-bottom: 20px;
    }
}

.fun {
    margin-top: 10rpx;
    display: flex;
    justify-content: flex-start;

    .left {
        display: flex;

        .item {
            display: flex;
            flex-direction: column;
            margin-left: 30rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .btn {
            border: 1px solid #ccc;
            padding: 20rpx;
            margin-right: 20rpx;
            border-radius: 20px;
        }

        .set {
            margin-right: 70rpx;
            border-radius: 100%;
        }
    }
}

.my {
    // margin-top: 80rpx;
    // background-color: #ccc;
    // height: 200rpx;
    display: flex;

    .my-login {
        margin-left: 60rpx;

        // background-color: #000;
        .img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 100%;
        }
    }

    .my-name {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20rpx;
    }

    text {
        line-height: 50rpx;
    }
}

.constellation {
    margin-top: 20rpx;
    margin-left: 50rpx;
}
</style>
